<template>
  <div class="order">
    <a-card title="商品管理" style="width: 100%">
      <div slot="extra">
        <a-radio-group
          default-value="1"
          button-style="solid"
          v-model="goodsradio"
          @change="goodsChange(goodsradio)"
          style="margin-right:10px"
        >
          <a-radio-button value="1">
            <div class="radiobox">
              全部<span v-if="goodsradio == 1" class="goods_length">{{ count > 99 ? '99+' : count }}</span>
            </div>
          </a-radio-button>
          <a-radio-button value="2">
            <div class="radiobox">
              已通过<span v-if="goodsradio == 2" class="goods_length">{{ count > 99 ? '99+' : count }}</span>
            </div>
          </a-radio-button>
          <a-radio-button value="3">
            <div class="radiobox">
              待审核<span v-if="goodsradio == 3" class="goods_length">{{ count > 99 ? '99+' : count }}</span>
            </div>
          </a-radio-button>
          <a-radio-button value="4">
            <div class="radiobox">
              被驳回
              <span v-if="goodsradio == 4" class="goods_length">{{ count > 99 ? '99+' : count }}</span>
            </div>
          </a-radio-button>
          <a-radio-button value="5">
            <div class="radiobox">
              已下架
              <span v-if="goodsradio == 5" class="goods_length">{{ count > 99 ? '99+' : count }}</span>
            </div>
          </a-radio-button>
        </a-radio-group>
        <a-select default-value="1" v-model="select" style="width: 140px">
          <a-select-option value="1">
            根据京东商品id
          </a-select-option>
          <a-select-option value="2">
            根据店铺名称
          </a-select-option>
          <a-select-option value="3">
            根据商品名称
          </a-select-option>
        </a-select>
        <a-input-search
          placeholder="请选择左侧查询条件再进行查询"
          style="width: 250px"
          v-model="searchipt"
          @search="onSearch"
        />
      </div>
      <div class="goods_table">
        <a-table
          :columns="columns"
          :rowKey="goodsList => goodsList.id"
          :dataSource="goodsList"
          :loading="tabloading"
          @change="handleTableChange"
          :pagination="pagination"
        >
          <div slot="goods_short_name" slot-scope="row">
            <span style="cursor: pointer;" @click="gorouter(row)">{{ row.goods_short_name }}</span>
          </div>
          <div slot="goods_img" slot-scope="row">
            <img :src="row.goods_img" style="width:120px;cursor: pointer;" @click="gorouter(row)" />
          </div>
          <span slot="status" slot-scope="row">
            <a-tag :color="row.status == 1 ? 'gray' : row.status === 2 ? 'green' : row.status === 3 ? 'red' : 'orange'">
              {{ row.status == 1 ? '待审核' : row.status === 2 ? '审核成功' : row.status === 3 ? '驳回' : '下架' }}
            </a-tag>
            <p v-if="row.status === 3" style="text-align:center">驳回理由:{{ row.error_info }}</p>
          </span>
          <div slot="goods_price" slot-scope="row">
            <span style="color:orange">¥{{ row.goods_after_price }}</span>
            /
            <span>¥{{ row.goods_price }}</span>
          </div>
          <div slot="commission_bl" slot-scope="row">
            <span style="color:orange">{{ row.commission_bl }}%</span>
          </div>
          <div slot="active" slot-scope="row">
            <a :href="row.goods_url" target="_blank" rel="noopener noreferrer">
              <span class="goodsurl">商</span>
            </a>
            <a :href="row.coupon_url" target="_blank" rel="noopener noreferrer">
              <span class="goodsurl quan">券</span>
            </a>
            <span class="goodsurl" style="cursor: pointer;" @click="doedit(row)">改</span>
          </div>
        </a-table>
      </div>
    </a-card>
    <a-modal
      title="修改商品"
      :visible="visible"
      width="1500px"
      :footer="null"
      :confirm-loading="confirmLoading"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-tabs default-active-key="1" v-model="tabs">
        <a-tab-pane key="1" tab="商品基本信息">
          <div class="editBox">
            <a-form-model
              ref="ruleForm"
              :model="form"
              :rules="rules"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              class="form_box"
            >
              <a-form-model-item label="">
                <div class="form_title">商品详情信息</div>
              </a-form-model-item>
              <a-form-model-item label="商品链接" ref="goods_url" prop="goods_url">
                <div class="display">
                  <a-input
                    v-model="form.goods_url"
                    :disabled="true"
                    placeholder="请输入商品链接或商品"
                    @blur="
                      () => {
                        $refs.goods_url.onFieldBlur()
                      }
                    "
                  />
                  <!-- <a-button class="getinfo" type="primary" size="large" @click="doDetectionGoods">
                    读取数据
                  </a-button> -->
                </div>
              </a-form-model-item>
              <a-form-model-item label="">
                <div class="display">
                  <div class="display">
                    <div style="width:157px;text-align: right;margin-right:10px">商品类型:</div>
                    <a-select v-model="form.goods_type" placeholder="请选择商品类型" size="large" style="width:200px">
                      <a-select-option value="1">
                        京东自营
                      </a-select-option>
                      <a-select-option value="2">
                        京东拼购
                      </a-select-option>
                      <a-select-option value="3">
                        POP
                      </a-select-option>
                    </a-select>
                  </div>
                  <div class="display">
                    <div style="width:105px;text-align: right;margin-right:10px">商品分类:</div>
                    <a-select
                      v-model="form.goods_class_id"
                      placeholder="请选择商品分类"
                      size="large"
                      style="width:200px"
                      @change="classchange"
                    >
                      <a-select-option :value="item.id" v-for="(item, index) in classList" :key="index">
                        {{ item.class_name }}
                      </a-select-option>
                    </a-select>
                  </div>
                  <div class="display">
                    <div style="width:106px;text-align: right;margin-right:10px">商品品牌:</div>
                    <a-select
                      v-model="form.brand_id"
                      placeholder="请选择商品品牌"
                      size="large"
                      style="width:200px"
                      show-search
                      :filter-option="filterOption"
                    >
                      <div slot="dropdownRender" slot-scope="menu">
                        <v-nodes :vnodes="menu" />
                        <a-divider style="margin: 4px 0;" />
                        <div
                          style="padding: 4px 8px; cursor: pointer;text-align: center;"
                          @mousedown="e => e.preventDefault()"
                        >
                          <a-pagination
                            size="small"
                            v-model="current"
                            :pageSize="pagesize"
                            :total="salecount"
                            @change="pageChange"
                          />
                        </div>
                      </div>
                      <a-select-option :value="item.id" v-for="(item, index) in saleList" :key="index">
                        {{ item.brand_name }}
                      </a-select-option>
                    </a-select>
                  </div>
                </div>
              </a-form-model-item>
              <a-form-model-item label="商品主图" prop="goods_img">
                <a-card title="商品展示主图" style="width: 834px">
                  <div class="showimg_mian">
                    <div class="showimg">
                      <a-upload
                        v-if="form.goods_img == ''"
                        name="file"
                        action="https://jfk-api.letuilm.com/api/upload_img"
                        list-type="picture-card"
                        :multiple="false"
                        :show-upload-list="false"
                        :before-upload="beforeUpload"
                        @change="handleChange3"
                      >
                        <div class="nogoodsimg">
                          <div class="no_main">
                            <a-icon type="fund" />
                            <p>
                              请上传商品主图
                            </p>
                          </div>
                        </div>
                      </a-upload>
                      <div v-else class="img_box">
                        <img :src="form.goods_img" alt="" srcset="" />
                        <a-icon type="close-circle" @click="closeimg" />
                      </div>
                    </div>
                    <div class="upload_box">
                      <a-upload
                        v-if="videourl === ''"
                        name="file"
                        list-type="picture-card"
                        class="avatar-uploader"
                        :show-upload-list="false"
                        action="https://jfk-api.letuilm.com/api/upload_img"
                        @change="handleChange"
                      >
                        <!-- :before-upload="beforeUpload" -->
                        <div class="nogoodsimg">
                          <div class="no_main">
                            <a-icon :type="loading ? 'loading' : 'play-circle'" />
                            <p>
                              上传视频
                            </p>
                          </div>
                        </div>
                      </a-upload>
                      <video v-else class="upvideo" :src="videourl" controls="controls">
                        <!-- <source type="video/mp4">
                  您的浏览器不支持播放! -->
                      </video>
                    </div>
                  </div>
                </a-card>
                <a-card title="营销长图" style="width: 834px">
                  <div class="showimg_mian">
                    <div class="showimg">
                      <a-upload
                        v-if="form.marketing_img == ''"
                        name="file"
                        action="https://jfk-api.letuilm.com/api/upload_img"
                        list-type="picture-card"
                        :multiple="false"
                        :show-upload-list="false"
                        :before-upload="beforeUpload"
                        @change="handleChange4"
                      >
                        <div class="nogoodsimg">
                          <div class="no_main">
                            <a-icon type="fund" />
                            <p>
                              请上传营销长图
                            </p>
                          </div>
                        </div>
                      </a-upload>
                      <div v-else class="img_box">
                        <img :src="form.marketing_img" alt="" srcset="" />
                        <a-icon type="close-circle" @click="closeimg(2)" />
                      </div>
                    </div>
                  </div>
                </a-card>
                <a-card title="商品细节图" style="width: 834px">
                  <a-button slot="extra" @click="showeva">
                    获取评价图
                  </a-button>
                  <div class="showgoodsinfo">
                    <a-upload
                      name="file"
                      action="https://jfk-api.letuilm.com/api/upload_img"
                      list-type="picture-card"
                      :file-list="fileList"
                      :multiple="true"
                      :before-upload="beforeUpload"
                      @preview="handlePreview"
                      @change="handleChange2"
                    >
                      <div v-if="fileList.length < 5">
                        <a-icon type="plus" />
                        <div class="ant-upload-text">
                          上传细节图
                        </div>
                      </div>
                    </a-upload>
                    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancelimg">
                      <img alt="example" style="width: 100%" :src="`//` + previewImage" />
                    </a-modal>
                  </div>
                  <div>
                    <p>*商品主图请控制在2M以内，尺寸为800*800,细节图最多上传5张</p>
                    <p>*小程序主尺寸为800*640</p>
                    <p>*视频请控制在5MB以内，请使用MP4格式</p>
                  </div>
                  <a-modal
                    title="商品评价图(最多选择5张)"
                    :visible="evaimgs"
                    :width="750"
                    @ok="handleOk2"
                    @cancel="handleCanceleva"
                  >
                    <div class="evaimgs_box" ref="evabox" @scroll="Scroll">
                      <div class="choose_box">
                        <div v-if="chooseimged.length === 0" style="margin:0 auto;">
                          请选择下方评价图!
                        </div>
                        <div style="display: flex;justify-content:space-around" v-else>
                          <div v-for="(item, index) in chooseimged" :key="index" class="chooseimg">
                            <img :src="item" />
                            <a-icon type="close-circle" @click="closechoose(item)" />
                          </div>
                        </div>
                      </div>
                      <a-checkbox-group v-model="chooseimged" :disabled="chooseimged.length > 4">
                        <a-row>
                          <a-col :span="8" v-for="(item, index) in imgsList" :key="index">
                            <a-checkbox :value="item">
                              <img :src="item" alt="" srcset="" />
                            </a-checkbox>
                          </a-col>
                        </a-row>
                      </a-checkbox-group>
                      <a-button type="dashed" :loading="loadingbtn" block>
                        加载更多...
                      </a-button>
                    </div>
                  </a-modal>
                </a-card>
              </a-form-model-item>
              <a-form-model-item label="京东名称">
                <a-input v-model="form.goods_name" disabled />
              </a-form-model-item>
              <a-form-model-item label="">
                <div class="display">
                  <div class="display">
                    <div style="width:270px;text-align: right;margin-right:10px">商品原价:</div>
                    <a-input v-model="form.goods_price" />
                  </div>
                  <div class="display">
                    <div style="width:200px;text-align: right;margin-right:10px">佣金比例:</div>
                    <a-input v-model="form.commission_bl" />
                  </div>
                </div>
              </a-form-model-item>
              <a-form-model-item label="商品短标题" prop="goods_short_name">
                <a-input v-model="form.goods_short_name" placeholder="限制在25个汉字之内，优质精简标题，概括精华！" />
              </a-form-model-item>
              <a-form-model-item label="商品文案" prop="goods_copywriting">
                <a-textarea
                  v-model="form.goods_copywriting"
                  :auto-size="{ minRows: 3, maxRows: 6 }"
                  placeholder="20-50字精简文案！突出产品亮点、需求痛点、为什么值得购买！"
                  allow-clear
                />
              </a-form-model-item>
              <a-form-model-item label="转载文案">
                <a-textarea
                  v-model="form.turn_copywriting"
                  :auto-size="{ minRows: 6, maxRows: 10 }"
                  placeholder="请按右侧规范填写"
                  allow-clear
                />
                <div class="tips">
                  例：<br />
                  [商品标题]<br />
                  京东价：[商品原价]元<br />
                  抢购价：[优惠价]元<br />
                  优惠：[券面额]元<br />
                  京东链接：[商品原始链接]<br />
                  优惠券链接：[优惠券链接]<br />
                  抢购：[商品推广链接]<br />
                  拍2件：231元 4瓶<br />
                  拍2件券:http://coupon.m.jd.com/..<br />
                  拍5件券:http://coupon.m.jd.com/..<br />
                  [推荐文案]<br />
                  特别注意>>请认真填写转链文案，不填请留空,<br />
                  禁止填写店铺/个人小尾巴!!<br />
                </div>
              </a-form-model-item>
              <a-form-model-item label="朋友圈文案">
                <div class="emoji_box">
                  <a-textarea
                    id="emojiInput"
                    ref="texttemplate"
                    v-model="form.friend_copywriting"
                    :auto-size="{ minRows: 6, maxRows: 15 }"
                    placeholder="请填写朋友圈文案"
                    allow-clear
                  />
                  <div id="exampleInputEmoji">
                    <a-button style="font-size:20px" @click="toogleDialogEmoji">😃</a-button>
                    <VEmojiPicker v-show="showDialog" labelSearch="Search" lang="pt-BR" @select="selectEmoji" />
                  </div>
                </div>
              </a-form-model-item>
              <a-form-model-item label="">
                <div class="form_title">附加信息</div>
              </a-form-model-item>
              <!-- <a-form-model-item label="推荐理由" prop="reason">
                <a-input v-model="form.reason" placeholder="展示给推广者，告知他们一个心动的理由来推广你提供的商品" />
              </a-form-model-item> -->
              <a-form-model-item label="搜索标签">
                <div>
                  <template v-for="(tag, index) in tags">
                    <a-tooltip v-if="tag.length > 5" :key="tag" :title="tag">
                      <a-tag :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                        {{ `${tag.slice(0, 5)}...` }}
                      </a-tag>
                    </a-tooltip>
                    <a-tag v-else :key="tag" :closable="index !== -1" @close="() => handleClose(tag)">
                      {{ tag }}
                    </a-tag>
                  </template>
                  <a-input
                    v-if="inputVisible"
                    ref="input"
                    type="text"
                    size="small"
                    :style="{ width: '78px' }"
                    :value="inputValue"
                    @change="handleInputChange"
                    @blur="handleInputConfirm"
                    @keyup.enter="handleInputConfirm"
                  />
                  <a-tag v-else style="background: #fff; borderStyle: dashed;" @click="showInput">
                    <a-icon type="plus" /> 新增标签
                  </a-tag>
                </div>
              </a-form-model-item>
              <a-form-model-item>
                <a-button @click="onSubmit" type="primary" size="large" class="subbtn">
                  提 交
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="更换优惠卷" force-render>
          <div class="editBox">
            <a-form-model
              :model="couponform"
              ref="couponForm"
              :rules="rulescoupon"
              :label-col="labelCol"
              :wrapper-col="wrapperCol"
              class="form_box"
            >
              <a-form-model-item label="">
                <div class="form_title">优惠劵信息</div>
              </a-form-model-item>
              <a-form-model-item label="优惠券链接">
                <div class="display">
                  <a-input v-model="couponform.coupon_url" placeholder="请输入优惠劵链接" @blur="doDetectionCoupon" />
                  <a-button class="getinfo" type="primary" size="large" @click="doDetectionCoupon">
                    读取数据
                  </a-button>
                </div>
                <div class="coupon_box">
                  <div class="coupon_info" style="margin-top:10px">
                    <span>优惠券面额</span>
                    <a-input v-model="couponform.coupon_discount" disabled />
                    <span>商品优惠价</span>
                    <a-input v-model="couponform.goods_after_price" disabled />
                  </div>
                  <div class="coupon_info">
                    <span>优惠券总数</span>
                    <a-input v-model="couponform.coupon_all_num" disabled />
                    <span>开始时间</span>
                    <a-input v-model="coupon_start_time" disabled />
                  </div>
                  <div class="coupon_info">
                    <span>优惠券剩余</span>
                    <a-input v-model="couponform.coupon_surplus_num" disabled />
                    <span>到期时间</span>
                    <a-input v-model="coupon_end_time" disabled />
                  </div>
                </div>
              </a-form-model-item>
              <a-form-model-item label="商品开始时间" prop="goods_start_time">
                <div>
                  <a-radio-group name="radioGroup" v-model="startshow" :default-value="1">
                    <a-radio :value="1">
                      此刻
                    </a-radio>
                    <a-radio :value="2">
                      选择时间
                    </a-radio>
                  </a-radio-group>
                </div>
                <div v-if="startshow == 2">
                  <a-date-picker
                    v-model="couponform.goods_start_time"
                    :disabled-date="disabledEndDate"
                    show-time
                    format="YYYY-MM-DD HH:mm:ss"
                    placeholder="预告时间"
                    :open="endOpen"
                    @openChange="handleEndOpenChange"
                  />
                  <!-- <a-input v-model="couponform.goods_start_time" placeholder="填写开始时间" /> -->
                </div>
              </a-form-model-item>
              <a-form-model-item>
                <a-button @click="doEditGoodsCoupon()" type="primary" size="large" class="subbtn">
                  提 交
                </a-button>
              </a-form-model-item>
            </a-form-model>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
  </div>
</template>

<script>
import {
  getUpGoodsList,
  // doDetectionGoods,
  doDetectionCoupon,
  getClassList,
  doEditGoodsCoupon,
  getGoodsBrand,
  doEditGoodsInfo,
  getEvaluateImgs
} from '@/api/goods'
import Moment from 'moment'
import VEmojiPicker from 'v-emoji-picker'
export default {
  name: 'Order',
  components: {
    VEmojiPicker,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  data () {
    return {
      tabs: '1',
      endOpen: false,
      endValue: null,
      startshow: 1,
      searchipt: '',
      select: '1',
      visible: false,
      loading: false,
      confirmLoading: false,
      count: 0,
      columns: [
        {
          title: 'ID',
          width: 150,
          align: 'center',
          dataIndex: 'id',
          scopedSlots: {
            customRender: 'id'
          }
        },
        {
          title: '更新时间',
          width: 200,
          align: 'center',
          dataIndex: 'update_at',
          scopedSlots: {
            customRender: 'update_at'
          }
        },
        {
          title: '商品名称',
          align: 'center',
          // dataIndex: 'goods_short_name',
          scopedSlots: {
            customRender: 'goods_short_name'
          }
        },
        {
          title: '分类',
          align: 'center',
          dataIndex: 'goods_class_name',
          scopedSlots: {
            customRender: 'goods_class_name'
          }
        },
        {
          title: '图片',
          align: 'center',
          // dataIndex: 'goods_img',
          scopedSlots: {
            customRender: 'goods_img'
          }
        },
        {
          title: '优惠/原价',
          align: 'center',
          scopedSlots: {
            customRender: 'goods_price'
          }
        },
        {
          title: '佣金比例',
          align: 'center',
          // dataIndex: 'commission_bl',
          scopedSlots: {
            customRender: 'commission_bl'
          }
        },
        {
          title: '到期时间',
          align: 'center',
          dataIndex: 'goods_end_time',
          scopedSlots: {
            customRender: 'goods_end_time'
          }
        },
        {
          title: '商品状态',
          align: 'center',
          // dataIndex: 'status',
          scopedSlots: {
            customRender: 'status'
          }
        },
        {
          title: '操作',
          align: 'center',
          scopedSlots: {
            customRender: 'active'
          }
        }
      ],
      pagination: {
        pageSize: 15,
        page: 1
      },
      tabloading: false,
      goodsradio: '1',
      goodsList: [
        //   {
        //   id: 11, // 商品表自增id
        //   goods_short_name: 'ces', // 商品短名称
        //   goods_class_id: '1000010', // 分类id
        //   goods_img: 'http://img11.360buyimg.com/mobilecms/s300x300_jfs/t1/104424/36/151/205414/5da8322cEb7a979bf/cfae07a0aaa17f9d.jpg!q30!q70.jpg', // 主图
        //   goods_xj_img: '1111', // 细节图
        //   goods_after_price: '10.00', // 卷后单价
        //   goods_price: '200.00', // 原价
        //   commission_bl: '20', // 佣金比例
        //   goods_end_time: 1590822442, // 商品到期时间
        //   status: 1, // 状态 1=待审核 2=审核成功 3驳回 4下架
        //   error_info:'驳回理由',
        //   item_id: '48200997426', // 京东商品id
        //   // 优惠卷链接
        //   coupon_url: 'https://coupon.m.jd.com/coupons/show.action?linkKey=AAROH_xIpeffAs_-naABEFoeWQgN5g8COpNhO4YT8BjgABlJjrENdCosf-Xvr7CzvcgUftd4ARvnNr416wy4EB9_iVgI-w',
        //   update_at: '2020-05-29 15:42:10', // 修改时间
        //   goods_class_name: '数码家电' // 分类名称
        // }
      ],
      previewVisible: false,
      previewImage: '',
      fileList: [
        // {
        //   uid: '-1',
        //   name: 'image.png',
        //   status: 'done',
        //   url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
        // }
      ],
      goodsinfoimg: [], // 商品细节图
      // loading: false,
      videourl: '', // 视频地址
      labelCol: {
        span: 4
      },
      wrapperCol: {
        span: 20
      },
      form: {
        goods_id: '',
        goods_url: '', // 商品地址
        goods_type: '', // 商品类型
        coupon_url: '', // 优惠劵地址
        goods_class_id: '', // 商品分类id
        brand_id: '', // 商品品牌id
        goods_img: '', // 商品主图
        marketing_img: '', // 营销长图
        goods_xj_img: '', // 商品细节图
        goods_name: '', // 商品名称
        goods_price: '', // 商品价格
        goods_short_name: '', // 商品短标题
        commission_bl: '', // 佣金比例
        goods_copywriting: '', // 商品文案
        turn_copywriting: '', // 转载文案
        friend_copywriting: '', // 朋友圈文案
        search_label: '', // 搜索标签
        // shop_id: '', // 商家id
        // shop_name: '', // 商家名称
        reason: '' // 推荐理由
      },
      couponform: {
        goods_id: '',
        coupon_url: '', // 优惠劵地址
        goods_start_time: '', // 商品开始时间
        coupon_discount: '', // 优惠劵面值
        goods_after_price: '', // 劵后价
        coupon_start_time: '', // 优惠卷开始时间
        coupon_end_time: '', // 优惠卷结束时间
        coupon_all_num: '', // 优惠劵总数量
        coupon_surplus_num: '' // 优惠劵剩余数量
      },
      coupon_start_time: '',
      coupon_end_time: '',
      rulescoupon: {
        coupon_url: [
          {
            required: true,
            message: '请输入优惠券地址',
            trigger: 'blur'
          }
        ]
      },
      rules: {
        goods_url: [
          {
            required: true,
            message: '请输入商品地址',
            trigger: 'blur'
          }
        ],
        // goods_start_time: [{
        //   required: true,
        //   message: '请选择开始时间',
        //   trigger: 'blur'
        // }],
        goods_img: [
          {
            required: true,
            message: '请添加商品图',
            trigger: 'blur'
          }
        ],
        goods_short_name: [
          {
            required: true,
            message: '请填写商品短标题',
            trigger: 'blur'
          }
        ],
        goods_copywriting: [
          {
            required: true,
            message: '请填写商品文案',
            trigger: 'blur'
          }
        ]
        // turn_copywriting: [{
        //   required: true,
        //   message: '请填写转载文案',
        //   trigger: 'blur'
        // }],
        // coupon_url: [{
        //   required: true,
        //   message: '请填写优惠卷地址',
        //   trigger: 'blur'
        // }],
        // reason: [{
        //   required: true,
        //   message: '请填写推荐理由',
        //   trigger: 'blur'
        // }],
        // search_label: [{
        //   required: true,
        //   message: '请填写搜索标签',
        //   trigger: 'blur'
        // }]
      },
      saleList: [
        // 选择品牌列表
        // {
        //   id: 1,
        //   brand_name: 'haier'
        // }
      ],
      classList: [
        // 选择商品分类列表
        // {
        //   id: 1,
        //   class_name: '女装'
        // }
      ],
      classid: '',
      salecount: 0,
      current: 1,
      pagesize: 100,
      brand_id: '',
      // flag: false,
      page: 1,
      imgscount: 0,
      scrollTop: 0,
      ischeck: false,
      tags: [],
      inputVisible: false,
      inputValue: '',
      loadingbtn: false,
      chooseimged: [],
      imgsList: [],
      evaimgs: false,
      ischack: true,
      goods_id: '',
      showDialog: false
    }
  },

  computed: {},
  created () {
    if (this.$route.query.id) {
        this.searchipt = this.$route.query.id
         this.getUpGoodsList(1, 15, this.goodsradio, this.searchipt, '', '')
    } else {
      this.getUpGoodsList(1, 15, 1)
    }
  },
  mounted () {},
  watch: {},
  methods: {
    gorouter (row) {
      console.log(row)
      if (row.status === 2) {
        const routes = this.$router.resolve({
          path: '/jdselectgoods/goodsdetails',
          query: { id: row.id }
        })
        window.open(routes.href, '_blank')
      } else {
        window.open(row.goods_url, '_blank')
      }
    },
    toogleDialogEmoji () {
      this.showDialog = !this.showDialog
    },
    // 表情
    selectEmoji (emoji) {
      var elInput = document.getElementById('emojiInput')
      // console.log(elInput);
      // 根据id选择器选中对象
      var startPos = elInput.selectionStart // input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd // 选中的字符到最后的字符
      // console.log(startPos, " --- ", endPos);
      if (startPos === undefined || endPos === undefined) return
      var txt = elInput.value
      // 将表情添加到选中的光标位置
      var result = txt.substring(0, startPos) + emoji.data + txt.substring(endPos)
      elInput.value = result // 赋值给input的value
      // 重新定义光标位置
      elInput.focus()
      elInput.selectionStart = startPos + emoji.data.length
      elInput.selectionEnd = startPos + emoji.data.length
      this.form.friend_copywriting = result // 赋值
    },
    handleClose (removedTag) {
      const tags = this.tags.filter(tag => tag !== removedTag)
      // console.log(tags)
      this.tags = tags
    },

    showInput () {
      this.inputVisible = true
      this.$nextTick(function () {
        this.$refs.input.focus()
      })
    },

    handleInputChange (e) {
      this.inputValue = e.target.value
    },

    handleInputConfirm () {
      const inputValue = this.inputValue
      let tags = this.tags
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue]
      }
      Object.assign(this, {
        tags,
        inputVisible: false,
        inputValue: ''
      })
    },

    Scroll (e) {
      // console.log(this.$refs.evabox.scrollTop)
      const ele = e.srcElement ? e.srcElement : e.target
      if (ele.scrollTop + ele.offsetHeight > ele.scrollHeight - 100) {
        // 监听滚动到div底部
        this.loadingbtn = true
        if (this.ischeck === false) {
          this.ischeck = true
          getEvaluateImgs({
            page: this.page,
            goods_id: this.goods_id
          })
            .then(res => {
              if (res.code === 200) {
                this.page++
                // console.log('评价图', res)
                this.imgsList.push(...res.data.data)
                this.ischeck = false
                this.loadingbtn = false
              } else {
                this.$message.info(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        }
      }
    },
    closechoose (item) {
      // console.log(item)
      for (const i in this.chooseimged) {
        if (this.chooseimged[i] === item) {
          this.chooseimged.splice(i, 1)
        }
      }
    },
    handleOk2 (e) {
      // console.log(this.chooseimged)
      this.fileList = []
      for (const i in this.chooseimged) {
        var obj = {
          uid: i,
          name: 'image.png',
          status: 'done',
          url: this.chooseimged[i]
        }
        this.fileList.push(obj)
      }
      this.evaimgs = false
    },
    showeva () {
      this.evaimgs = true
      getEvaluateImgs({
        page: this.page,
        goods_id: this.goods_id
      })
        .then(res => {
          // console.log('评价图', res)
          this.imgscount = res.data.count
          this.imgsList = res.data.data
          this.scrollTop = this.$refs.evabox.scrollTop
        })
        .catch(err => {
          console.log(err)
        })
    },
    classchange (val) {
      this.classid = val
      this.getGoodsBrand(val, 1, this.pagesize)
    },
    pageChange (page, pageSize) {
      // console.log(page, pageSize)
      this.getGoodsBrand(this.classid, page, this.pagesize)
    },
    handleTableChange (pagination, filters) {
      // console.log(pagination)
      const pager = {
        ...this.pagination
      }
      pager.current = pagination.current
      this.pagination = pager
      this.fetch({
        results: pagination.pageSize,
        page: pagination.current,
        ...filters
      })
    },
    fetch (params = {}) {
      // console.log('params:', params)
      this.tabloading = true
      if (this.select === '1') {
        this.getUpGoodsList(params.page, 15, this.goodsradio, this.searchipt, '', '')
      }
      if (this.select === '2') {
        this.getUpGoodsList(params.page, 15, this.goodsradio, '', this.searchipt, '')
      }
      if (this.select === '3') {
        this.getUpGoodsList(params.page, 15, this.goodsradio, '', '', this.searchipt)
      }
    },
    disabledEndDate (endValue) {
      if (!endValue) {
        return false
      }
      return endValue < Moment().subtract('days', 1) || endValue > Moment().add('days', 3)
    },
    handleEndOpenChange (open) {
      this.endOpen = open
    },
    // 更换优惠卷
    doEditGoodsCoupon () {
      this.$refs.couponForm.validate(valid => {
        if (valid) {
          if (this.startshow === 1) {
            var num = Date.now()
            this.couponform.goods_start_time = num.toString().slice(0, -3)
          } else {
            var str = '' + this.couponform.goods_start_time
            this.couponform.goods_start_time = str.slice(0, -3)
            // console.log(this.couponform.goods_start_time)
          }
          doEditGoodsCoupon(this.couponform)
            .then(res => {
              if (res.code === 200) {
                // console.log('返回', res)
                this.couponform = {}
                this.couponform = this.$options.data().couponform
                this.coupon_start_time = ''
                this.coupon_end_time = ''
                this.startshow = 1
                this.tabs = '1'
                this.visible = false
                this.$message.success('更换成功!')
              } else {
                this.$message.info(res.msg)
              }
            })
            .catch(err => {
              console.log(err)
            })
        }
      })
    },
    onSearch (value) {
      // console.log(value)
      if (this.select === '1') {
        this.getUpGoodsList(1, 15, this.goodsradio, value, '', '')
      }
      if (this.select === '2') {
        this.getUpGoodsList(1, 15, this.goodsradio, '', value, '')
      }
      if (this.select === '3') {
        this.getUpGoodsList(1, 15, this.goodsradio, '', '', value)
      }
    },
    handleOk (e) {
      this.confirmLoading = true
      setTimeout(() => {
        this.visible = false
        this.confirmLoading = false
      }, 2000)
    },
    handleCanceleva (e) {
      this.evaimgs = false
      this.chooseimged = []
    },
    handleCancel (e) {
      this.visible = false
      this.form = this.$options.data().form
    },
    doedit (row) {
      console.log('row', row)
      this.classid = row.goods_class_id
      if (row.search_label !== '') {
        this.tags = row.search_label.split(',')
      } else {
        this.tags = []
      }
      // console.log(this.tags)
      this.brand_id = row.brand_id
      this.goods_id = row.item_id
      this.couponform.goods_id = row.id
      this.couponform.coupon_url = row.coupon_url
      // console.log(' this.couponform', this.couponform)
      this.getClassList(row)
    },
    // 上单人员获取商品列表
    getUpGoodsList (page, pagesize, type, itemid, shopname, goodsname) {
      this.tabloading = true
      getUpGoodsList({
        page: page,
        pagesize: pagesize,
        type: type,
        item_id: itemid,
        shop_name: shopname,
        goods_name: goodsname
      })
        .then(res => {
          if (res.code === 200) {
            // console.log('商品列表返回', res)
            this.count = res.data.count
            this.goodsList = res.data.data
            for (let i = 0; i < this.goodsList.length; i++) {
              this.goodsList[i].goods_end_time = Moment(parseInt(this.goodsList[i].goods_end_time + '000')).format(
                'YYYY-MM-DD HH:mm:ss'
              )
            }
            const pagination = {
              ...this.pagination
            }
            pagination.total = res.data.count
            this.pagination = pagination
            this.tabloading = false
          } else {
            this.$message.info(res.msg)
            this.tabloading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    goodsChange (val) {
      // console.log('goodsradio', val)
      if (this.searchipt !== '') {
        if (this.select === '1') {
          this.getUpGoodsList(1, 15, this.goodsradio, this.searchipt, '', '')
        }
        if (this.select === '2') {
          this.getUpGoodsList(1, 15, this.goodsradio, '', this.searchipt, '')
        }
        if (this.select === '3') {
          this.getUpGoodsList(1, 15, this.goodsradio, '', '', this.searchipt)
        }
      } else {
        this.getUpGoodsList(1, 15, val)
      }
    },

    filterOption (input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    // 根据分类查询商品品牌
    getGoodsBrand (id, page, size) {
      getGoodsBrand({
        class_id: id,
        page: page,
        pagesize: size
      })
        .then(res => {
          if (res.code === 200) {
            // console.log('品牌返回', res)
            if (res.code === 200) {
              this.salecount = res.data.count
              this.saleList = res.data.data
            }
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },

    closeimg (val) {
      if (val === 1) {
        this.form.goods_img = ''
      } else {
        this.form.marketing_img = ''
      }
    },
    handleCancelimg () {
      this.previewVisible = false
    },
    handlePreview (file) {
      // console.log(file)
      this.previewImage = file.response.data.url
      this.previewVisible = true
    },
    handleChange2 ({ fileList }) {
      // console.log('上传图片列表', fileList)
      this.fileList = fileList
    },
    // 获取分类
    getClassList (row) {
      getClassList({
        page: 1,
        pagesize: 999999
      })
        .then(res => {
          if (res.code === 200) {
            // console.log('获取分类返回', res)
            this.classList = res.data
            this.form = row
            this.form.brand_id = row.brand_name
            // this.fileList
            const relearr = row.goods_xj_img.split(',')
            // console.log(relearr)
            this.fileList = relearr.map(function (obj, index) {
              var rObj = {}
              rObj.uid = index - 1
              rObj.status = 'done'
              rObj.name = 'image' + index
              rObj.url = obj
              return rObj
            })
            // console.log(this.fileList)
            this.form.goods_class_id = parseInt(row.goods_class_id)
            // console.log(this.form.goods_class_id)
            this.getGoodsBrand(this.form.goods_class_id, 1, this.pagesize)
            this.form.goods_id = row.id
            this.form.goods_type = '' + row.status
            this.visible = true
          } else {
            this.$message.info(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // // 检测优惠劵
    doDetectionCoupon () {
      // this.form.coupon_url =
      //   'https://coupon.m.jd.com/coupons/show.action?linkKey=AAROH_xIpeffAs_-naABEFoeWQgN5g8COpNhO4YT8BjgABlJjrENdCosf-Xvr7CzvcgUftd4ARvnNr416wy4EB9_iVgI-w'
      if (this.couponform.coupon_url === '') {
      } else {
        doDetectionCoupon({
          coupon_url: this.couponform.coupon_url
        })
          .then(res => {
            if (res.code === 200) {
              // console.log('检测优惠劵返回', res)
              this.couponform.goods_after_price = (this.form.goods_price - res.data.discount).toFixed(2)
              this.couponform.coupon_all_num = res.data.batchCount
              this.couponform.coupon_discount = res.data.discount
              // console.log('---------', res.data.start_time.toString().slice(0, -3))
              this.couponform.coupon_start_time = parseInt(res.data.start_time.toString().slice(0, -3))
              this.couponform.coupon_end_time = parseInt(res.data.end_time.toString().slice(0, -3))
              this.coupon_start_time = Moment(parseInt(res.data.start_time)).format('YYYY-MM-DD HH:mm:ss')
              this.coupon_end_time = Moment(parseInt(res.data.end_time)).format('YYYY-MM-DD HH:mm:ss')
              this.couponform.coupon_surplus_num = res.data.num
            } else {
              this.$message.info(res.msg)
            }
          })
          .catch(err => {
            console.log(err)
          })
      }
    },
    handleChange3 (info) {
      this.form.goods_img = `//` + info.file.response.data.url
    },
    handleChange4 (info) {
      this.form.marketing_img = `//` + info.file.response.data.url
    },
    handleChange (info) {
      // console.log('info', info)
      if (info.file.status === 'uploading') {
        this.loading = true
        return
      }
      this.videourl = `http://` + info.file.response.data.url
    },
    beforeUpload (file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
      if (!isJpgOrPng) {
        this.$message.error('对不起,只支持jpg/png格式的图片!')
      }
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error('对不起!图片大小超过5M!')
      }
      return isJpgOrPng && isLt2M
    },
    onSubmit () {
      // console.log('细节图', this.fileList)
      if (this.fileList.length > 0) {
        var urlStre = ''
        for (var i = 0; i < this.fileList.length; i++) {
          if (this.fileList[i].response) {
            urlStre += `http://` + this.fileList[i].response.data.url + ','
          } else {
            urlStre += this.fileList[i].url + ','
          }
        }
        urlStre = urlStre.substring(0, urlStre.length - 1)
        this.form.goods_xj_img = urlStre
        // console.log(urlStre)
      }
      if (typeof this.form.brand_id === 'string') {
        this.form.brand_id = this.brand_id
      }
      this.form.search_label = this.tags.toString()
      // console.log('提交表单', this.form)
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          if (this.form.goods_after_price < 0) {
            this.$message.info('对不起!卷后价不能为负!请重新检测优惠卷!')
          } else {
            doEditGoodsInfo(this.form)
              .then(res => {
                if (res.code === 200) {
                  // console.log(res)
                  this.$message.success('修改成功!')
                  this.form = {}
                  this.form = this.$options.data().form
                  this.visible = false
                } else {
                  this.$message.info(res.msg)
                }
              })
              .catch(err => {
                console.log(err)
              })
          }
        } else {
          this.$message.info('请检查表单!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.display {
  display: flex;
}
.emoji_box {
  position: relative;

  #exampleInputEmoji {
    position: absolute;
    bottom: -26px;
    right: 0;

    /deep/.ant-btn:hover {
      background-color: #fff;
    }

    #EmojiPicker {
      position: absolute;
      top: -252px;
      left: 70px;

      /deep/#Categories {
        overflow: hidden;

        .category {
          height: 35px;
          padding: 0px;
        }
      }

      /deep/#Emojis {
        color: aliceblue;
      }

      /deep/#InputSearch {
        display: none;
      }
    }
  }
}
.evaimgs_box {
  height: 750px;
  overflow-y: auto;

  .choose_box {
    width: 100%;
    height: 105px;
    line-height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0px;
    z-index: 9;
    box-shadow: 0px 5px 5px #8080803d;
    border-bottom: 1px solid #8080803d;
    background-color: #fff;

    .chooseimg {
      position: relative;
      border: 1px solid #8080803d;
      background-color: #8080803d;
      border-radius: 8px;
      margin: 0 15px;

      img {
        width: 100px;
        padding: 5px;
      }
    }

    .anticon-close-circle {
      position: absolute;
      top: 0;
      right: 0;
      font-size: 18px;
      cursor: pointer;
      display: none;
    }
  }

  .chooseimg:hover {
    .anticon-close-circle {
      display: block;
    }
  }

  /deep/.ant-checkbox {
    display: none !important;
  }

  /deep/.ant-col {
    height: 110px;
  }

  .ant-checkbox-wrapper {
    margin: 10px 5px;
    // box-sizing: border-box;
  }

  /deep/.ant-checkbox-wrapper-checked {
    border: 1px solid #8080803d;
    border-radius: 8px;
    background-color: #8080803d;
  }
}

.editBox {
  width: 100%;
  height: 900px;
  overflow-y: auto;

  .form_box {
    width: 1000px;
    position: relative;

    .form_title {
      height: 20px;
      line-height: 20px;
      font-size: 18px;
      color: #545454;
      font-weight: bold;
      padding-left: 20px;
      position: relative;
    }

    .form_title:before {
      display: block;
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      width: 3px;
      height: 20px;
      margin-top: -10px;
      background: #2073f2;
      border-radius: 5px;
      background-image: linear-gradient(#2073f2, #4a8ef6);
    }

    .getinfo {
      padding: 0px 38px;
      border-radius: 7px;
    }

    .ant-input {
      color: #000;
      height: 40px;
      margin-right: 10px;
    }

    .showimg_mian {
      display: flex;

      .anticon-play-circle {
        font-size: 67px;
      }

      .showimg {
        width: 238px;
        height: 264px;
        margin-right: 20px;

        /deep/.ant-upload {
          width: 238px;
          height: 264px;
          padding: 0px;
        }

        .nogoodsimg {
          // border: 1px solid #ccc;
          text-align: center;

          .no_main {
            width: 150px;
            margin: 66px auto;

            .anticon-fund {
              font-size: 67px;
            }
          }
        }

        img {
          width: 100%;
          height: 100%;
        }
      }

      .img_box {
        position: relative;

        img {
          width: 100%;
          height: 100%;
        }

        .anticon-close-circle {
          position: absolute;
          top: 0;
          right: 0;
          font-size: 24px;
          cursor: pointer;
          display: none;
          transition: all 0.3s linear;
        }

        img:hover + .anticon-close-circle {
          display: block;
        }

        .anticon-close-circle:hover {
          display: block;
          transform: rotate(90deg);
        }
      }

      .upload_box {
        /deep/.ant-upload {
          width: 238px;
          height: 264px;
        }

        .upvideo {
          width: 482px;
          height: 264px;
        }
      }
    }

    .coupon_box {
      .coupon_info {
        display: flex;
        text-align: center;
        border: 1px solid #d9d9d9;
        margin-bottom: 10px;

        span {
          display: inline-block;
          width: 250px;
          padding: 0px 15px;
          background-color: #fafafa;
        }

        .ant-input {
          border: none;
        }
      }
    }

    .subbtn {
      display: block;
      width: 266px;
      text-align: center;
      height: 60px;
      line-height: 60px;
      border-radius: 30px;
      font-size: 24px;
      background: #6775fc;
      color: #fff;
      cursor: pointer;
      border: none;
      box-shadow: 0 5px 10px rgba(7, 133, 253, 0.5);
      text-decoration: none;
      margin-left: 400px;
      transition: all 300ms ease;
    }

    .subbtn:hover {
      background: #2d3feb;
      color: #fff;
    }

    .tips {
      position: absolute;
      right: -430px;
      bottom: -104px;
      width: 360px;
      padding: 20px;
      background: #f8fbff;
      color: #878787;
      border-radius: 5px;
      // z-index: 99;
      line-height: 2;
      box-shadow: 0 5px 10px rgba(7, 133, 253, 0.15);
    }
  }
}

.order {
  .radiobox {
    display: flex;
    align-items: center;

    /deep/.goods_length {
      display: inline-block;
      width: 20px;
      height: 20px;
      line-height: 20px;
      background-color: #fff;
      margin-left: 10px;
      color: #000;
      font-size: 16px;
      font-weight: bolder;
      text-align: center;
      border-radius: 50%;
    }
  }

  .goods_table {
    .goodsurl {
      display: inline-block;
      width: 30px;
      height: 30px;
      line-height: 28px;
      background-color: #fff;
      margin-left: 10px;
      color: #000;
      font-size: 18px;
      // font-weight: bolder;
      text-align: center;
      border-radius: 50%;
      // padding: 5px;
      color: gray;
      border: 1px solid gray;
    }

    .ant-table-row:hover {
      .goodsurl {
        background-color: blue;
        color: #fff;
        // font-weight: bolder;
        border: none;
      }

      .quan {
        background-color: orange;
      }
    }
  }
}
</style>
